<template>
  <div>
    <div>
      <div class="back-but">
        <span @click="back()"><img src="../../../assets/img/l-but.png" >返回</span>
        <span>|</span>
        <span>{{ videoDetail.name }}的视频监督</span>
      </div>
      <div class="detail_box">
        <el-row>
          <el-col :span="14">
            <div>
              <div class="title">交底单：{{ jobInfo.typeName }}</div>
              <h5>勘察项目</h5>
              <div class="project" v-for="(item, index) in checkItemsList" :key="item.id">
                <div>{{ item.code + ': ' +item.name }}</div>
                <div v-if="item.attachments && item.attachments.length > 0" style="margin: 5px 0;">
                  <div>附件：</div>
                  <div v-for="url in item.attachments">
                    <a href="javascript:void(0)" @click="downloadFile(url)">{{ url }}</a>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="3">
            <div style="visibility: hidden;">-</div>
          </el-col>
          <el-col :span="7">
            <div style="margin-bottom: 15px;font-size: 14px;">督察状态：{{jobInfo.workStatus === 2 ? '可发起' : '不可发起'}}</div>
            <el-button type="primary" plain size="mini" @click="handleSubmit" :disabled="jobInfo.workStatus!=2">开启视频督查</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 连麦详情 -->
    <el-drawer title="直播间" :visible.sync="showSingle" :destroy-on-close="true" size="80%" :direction="'rtl'">
      <Single :roomId="channelName" @closeLive="closeLive"></Single>
    </el-drawer>
  </div>
</template>

<script>
import NERTC from 'nertc-web-sdk';
import Player from './playerVideo/index.vue'
import Single from './single/index.vue'
import { getJobDetail, jobCheckItems, createRoom } from '@/api/jobTicket/index.js'
import { getDics } from '@/api/utils/index'
export default {
  name: 'join',
  components: {
    Player,
    Single
  },
  props: {
    videoDetail: {
      type: Object
    }
  },
  data() {
    return {
      elLoading: false,
      showSingle: false,
      jobInfo: {},
      channelName: '',
      jobTicketStatus: {},
      checkItemsList: []
    };
  },
  async mounted() {
    if (!NERTC.checkSystemRequirements()) {
      this.isSupport = false;
      this.$message({
        message: '当前浏览器不支持体验，建议下载安装最新chrome浏览器',
        type: 'warning'
      })
    }
    await this.getDicList()
    this.getJobs()
    this.getCheckItems()
  },
  methods: {
    closeLive() {
      this.showSingle = false
    },
    async getDicList() {
      getDics(['jobTicketStatus']).then(res => {
        this.jobTicketStatus = res.data.jobTicketStatus
      })
    },
    getJobs() {
      getJobDetail({
        surveyId: this.videoDetail.surveyId
      }).then(res=> {
        if(res.data && res.data.length > 0) {
          this.jobInfo = res.data[0]
        }
      })
    },
    getCheckItems() {
      jobCheckItems({
        surveyId: this.videoDetail.surveyId
      }).then(res=> {
        let list = []
        res.data.forEach(item => {
          let attachments = []
          if(item.attachments && item.attachments.indexOf('http') > -1) {
            attachments = item.attachments.split(',')
          }
          let obj = {...item}
          obj.attachments = attachments
          list.push(obj)
        })
        this.checkItemsList = list
      })
    },

    downloadFile(url) {
      window.open(url)
    },
    handleSubmit() {
      this.openLoading()
      createRoom({
        schemeId: this.jobInfo.schemeId,
        record: true,
        enableStream: true
      }).then(res => {
        this.closeLoading()
        this.channelName = res.data.roomCid
        this.showSingle = true
      }).catch(err => {
        this.closeLoading()
      })
    },
    back(){
      this.$emit("back");
    },
    openLoading(){
      this.elLoading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    },
    closeLoading(){
      this.elLoading.close();
    },
  },
};
</script>

<style scoped lang="less">
a {
  color: #409EFF;
}
.detail_box {
  padding: 20px 20px 40px 20px;
}
.work_list {
  padding: 10px 0px 0 20px;
  width: 100%;
  min-height: 400px;
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #e7e7e7;
  border-radius: 6px;
  .title {
    text-align: center;
  }
  .content {
    margin-top: 10px;
  }
  .name {
    color: #606266;
    padding-left: 6px;
    white-space: pre-wrap;
    line-height: 24px;
    font-size: 14px;
  }
  .job_list {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    .job {
      margin-bottom: 8px;
    }

  }
}
.project {
  font-size: 14px;
  color: #606266;
  margin-bottom: 25px;
}
</style>
